<template>
    <div class="item-wrapper">
      <div class="rl-content">
        <div class="search-box" ref="searchBar">
          <el-form :model="form" ref="form" size="medium" label-width="75px" class="demo-form">
            <el-row>
              <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
                <el-form-item label="用户姓名" prop="personName">
                  <el-input placeholder="请输入用户姓名" v-model.trim="form.personName" clearable @clear="handleSearch"
                    @keyup.enter.native="handleSearch"></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
                <el-form-item label="卡号" prop="cardNo">
                  <el-input placeholder="请输入卡号" v-model.trim="form.cardNo" clearable @clear="handleSearch"
                    @keyup.enter.native="handleSearch"></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
                <el-form-item label="关联项目" prop="cardType">
                  <el-select style="width: 100%;" v-model="form.cardType" placeholder="请选择关联项目" clearable
                    @change="handleSearch">
                    <el-option v-for="item in cardTypeOptions" :key="item.cardType" :label="item.cardTypeName"
                      :value="item.cardType" @change="handleSearch">
                      <span>{{ item.cardTypeName }}</span>
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
                <el-form-item label="统计时间" prop="monthRange">
                  <el-date-picker style="width: 100%" v-model="form.monthRange" type="monthrange" range-separator="-"
                    start-placeholder="开始月份" end-placeholder="结束月份" value-format="yyyy-MM-dd" :clearable="false"
                    :picker-options="pickerOptions" @change="handleSearch">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
                <el-form-item label-width="10px">
                  <el-button type="primary" size="small" @click="handleSearch">筛选</el-button>
                  <el-button @click="handleReset">重置</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="table-wrap">
          <div class="operate-bar">
            <div class="time">{{ range }}</div>
            <div class="tips">
              共服务 <span class="total">{{ page.sums }}</span> 人
            </div>
          </div>
          <div :style="{ height: tableHeight + 'px' }">
            <el-table :data="list" height="100%" v-loading="loading" highlight-current-row tooltip-effect="light"
              :header-cell-class-name="'header_name_style'">
              <el-table-column prop="personName" label="用户姓名" min-width="100" show-overflow-tooltip></el-table-column>
              <el-table-column prop="cardNo" label="卡号" min-width="100" show-overflow-tooltip></el-table-column>
              <el-table-column prop="cardTypeName" label="关联项目" min-width="100" show-overflow-tooltip>
              </el-table-column>
              <el-table-column prop="rightList" label="当前服务任务状态" min-width="140">
                <template slot-scope="scope">
                  <el-popover v-if="scope.row.currentName.value != '1'" placement="top-start" title="" width="150"
                    trigger="hover">
                    <div class="list-box">
                      <div class="item" v-for="(item, index) in scope.row.rightList" :key="index">
                        <!-- <span class="name">{{ item.rightName }}</span> -->
                        <span :class="[
                            'name',
                            { unfinishColor: item.finishType == '0' },
                            { doingColor: item.finishType == '1' },
                            { finishColor: item.finishType == '2' },
                          ]">{{ item.rightName }}</span>
  
                        <span :class="[item.isActive ? 'isActive' : '']" v-if="item.finishType == '0'"><elan-svg
                            icon="unfinish"></elan-svg><span :class="['finish-type', 'unfinishColor']">未完成</span></span>
                        <span :class="[item.isActive ? 'isActive' : '']" v-if="item.finishType == '1'"><elan-svg
                            icon="doing"></elan-svg><span :class="['finish-type', 'doingColor']">进行中</span></span>
                        <span :class="[item.isActive ? 'isActive' : '']" v-if="item.finishType == '2'"><elan-svg
                            icon="finish"></elan-svg><span :class="['finish-type', 'finishColor']">已完成</span></span>
                        <!-- <span :class="[item.isActive ? 'isActive' : '']"><elan-svg icon="unfinish"></elan-svg>{{
                        item.finishType == "0"
                        ? "未完成"
                        : item.finishType == "1"
                          ? "进行中"
                          : "已完成"
                      }}</span> -->
                      </div>
                    </div>
                    <div slot="reference" v-if="scope.row.currentName.value == '3'" class="currentName-3">
                      <i class="pointer">...&#x3e;</i>
                      <span class="name pointer">
                        <elan-svg icon="doing"></elan-svg>
                        {{ scope.row.currentName.name }}</span>
                    </div>
                    <div slot="reference" v-if="
                        scope.row.currentName.value == '2' ||
                          scope.row.currentName.value == '4'
                      " :class="[
                        `currentName-${scope.row.currentName.value}`,
                        'pointer',
                      ]">
                      <elan-svg icon="unfinish" v-if="scope.row.currentName.name === '未开始'"></elan-svg>
                      <elan-svg icon="finish" v-if="scope.row.currentName.name === '已完成'"></elan-svg>
                      <span style="margin-left: 4px;">{{
                        scope.row.currentName.name
                      }}</span>
                    </div>
                  </el-popover>
                  <div slot="reference" v-if="scope.row.currentName.value == '1'" :class="[
                      `currentName-${scope.row.currentName.value}`,
                      'pointer',
                    ]">
                    <elan-svg icon="unactive" v-if="scope.row.currentName.name === '未激活'"></elan-svg>
                    <span style="margin-left: 4px;">{{
                      scope.row.currentName.name
                    }}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="rateList" label="剩余服务任务数" min-width="100">
                <template slot-scope="scope">
                  <span>{{ getUnfinishedTaskNum(scope.row.rightList) }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="rateList" label="顾问解析报告数" min-width="100">
                <template slot-scope="scope">
                  <span>{{
                    Array.isArray(scope.row.reportList)
                      ? scope.row.reportList.length
                      : 0
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="activeTime" label="激活时间" show-overflow-tooltip min-width="100">
              </el-table-column>
            </el-table>
          </div>
          <div class="pager" v-if="list.length > 0">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
              :current-page="page.currentPage" :page-sizes="page.pageSizes" :page-size="page.pageSize"
              layout="total, sizes, prev, pager, next, jumper" :total="page.sums" background></el-pagination>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import page from "@/mixin/page";
  import { performanceServers } from "@/api/index";
  export default {
    components: {},
    mixins: [page],
    props: {
      consultantInfo: {
        type: Object,
        default: null,
      },
      cardTypeOptions: {
        type: Array,
        default: () => [],
      },
    },
    data() {
      return {
        tableHeight: "auto",
        loading: false,
        range: "",
        list: [],
        form: {
          cardNo: "",
          personName: "",
          monthRange: [],
          cardType: "",
        },
        selectedRow: {},
      };
    },
    computed: {
      pickerOptions() {
        return {
          disabledDate(time) {
            const date1 = new Date("2023-09-01");
            const date2 = new Date(
              new Date().getFullYear() +
                "-" +
                ("0" + (new Date().getMonth() + 1)).substr(-2) +
                "-" +
                ("0" + new Date().getDate()).substr(-2)
            );
            const diff = date2 - date1 + 60 * 60 * 24 * 1000;
            return (
              time.getTime() < Date.now() - diff || Date.now() < time.getTime()
            );
          },
        };
      },
    },
    async created() {
      this.form.monthRange = this.consultantInfo.monthRange;
      window.addEventListener("resize", this.getHeight);
      this.getData();
    },
    mounted() {
      this.getHeight();
    },
    destroyed() {
      window.removeEventListener("resize", this.getHeight);
    },
    methods: {
      getUnfinishedTaskNum(list) {
        console.log("🚀 ~ getUnfinishedTaskNum ~ list:", list);
  
        const temp = (list || []).filter((item) => item.finishType != 2);
        return temp.length;
      },
      getData() {
        this.loading = true;
        let params = {
          consultantId: this.consultantInfo.consultantId,
          cardNo: this.form.cardNo,
          personName: this.form.personName,
          cardType: this.form.cardType,
          pageNo: this.page.currentPage,
          pageSize: this.page.pageSize,
        };
        if (this.form.monthRange.length) {
          const year = this.form.monthRange[1].slice(0, 4);
          const month = this.form.monthRange[1].slice(5, 7);
          const lastDay = this.getLastDay(year, month);
          params.startTime = this.form.monthRange[0] + " 00:00:00";
          params.endTime =
            this.form.monthRange[1].slice(0, 7) + "-" + lastDay + " 23:59:59";
  
          this.range = `${this.form.monthRange[0].replace(/-/g, ".")} - ${(
            this.form.monthRange[1].slice(0, 7) +
            "." +
            lastDay
          ).replace("-", ".")}`;
        }
        performanceServers(params)
          .then((res) => {
            this.loading = false;
            if (res.code == 200) {
              res.data.forEach((item) => {
                item.currentName = this.getCurrentRightName(item);
                const tempArr = [];
                item.rightList.forEach((item) => {
                  if (item.finishType == 2) {
                    tempArr.push(item);
                  }
                });
                if (tempArr.length) {
                  tempArr[tempArr.length - 1].isActive = true;
                }
              });
              this.list = res.data;
              this.page.sums = res.pageparam.sums;
            } else {
              this.loading = false;
              this.$message.error(res.status_desc);
            }
          })
          .catch((err) => {
            this.loading = false;
            this.$message.error(err.message);
          })
          .finally(() => {
            this.loading = false;
          });
      },
      getCurrentRightName(item) {
        if (item.personId == "0" || !item.personId) {
          return {
            name: "未激活",
            value: "1",
          };
        }
        const rightList = item.rightList;
  
        const unStartStatusArray = [];
        rightList.forEach((item) => {
          if (item.finishType == 0) {
            unStartStatusArray.push(item);
          }
        });
        if (unStartStatusArray.length == rightList.length) {
          return {
            name: "未开始",
            value: "2",
          };
        }
  
        const finishStatusArray = [];
        rightList.forEach((item) => {
          if (item.finishType == "2") {
            finishStatusArray.push(item);
          }
        });
        if (finishStatusArray.length == rightList.length) {
          return {
            name: "已完成",
            value: "4",
          };
        }
        const tempArr = [];
        rightList.forEach((item) => {
          if (item.finishType == 2 || item.finishType == 1) {
            tempArr.push(item);
          }
        });
        if (tempArr.length) {
          return {
            name: tempArr[tempArr.length - 1].rightName,
            value: "3",
          };
        }
      },
      getLastDay(year, month) {
        const date = new Date(year, month, 0);
        return date.getDate();
      },
      getHeight() {
        this.tableHeight =
          window.innerHeight - this.$refs.searchBar.offsetHeight - 265;
      },
      async handleSearch() {
        this.$set(this.page, "currentPage", 1);
        this.getData();
      },
      handleReset() {
        this.form.title = "";
        this.form.personName = "";
        this.form.cardNo = "";
        this.form.cardType = "";
        this.form.monthRange = [];
        this.range = "";
        this.handleSearch();
      },
    },
  };
  </script>
  
  <style>
  .el-popover.el-popper.el-popover-self {
    min-width: 20px !important;
  }
  </style>
  
  <style lang="scss" scoped>
  .item-wrapper {
    .rl-content {
      border-radius: 8px 0 0 0;
      background-color: #fff;
      .search-box {
        padding: 12px 12px 0 12px;
        ::v-deep .el-form-item {
          margin-bottom: 14px;
        }
      }
      .table-wrap {
        box-shadow: 0 0 0 0;
        padding: 7px 12px 17px 12px;
        overflow: hidden;
        .operate-bar {
          display: flex;
          align-items: center;
          margin: 0 0 17px 14px;
          .time {
            font-size: 16px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #222222;
            position: relative;
            &::before {
              content: "";
              display: inline-block;
              width: 4px;
              height: 14px;
              background-color: $primary-color;
              position: absolute;
              left: -12px;
              top: 50%;
              transform: translateY(-50%);
            }
          }
          .tips {
            margin-left: 24px;
            font-size: 16px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #222222;
            .total {
              color: $primary_color;
            }
          }
          /deep/ .el-button--small.is-round {
            font-size: 14px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #555555;
          }
        }
        .operation-button {
          /deep/ .el-button--text {
            font-weight: 400;
          }
        }
      }
      .pointer {
        cursor: pointer;
      }
      .danger {
        color: #f56c6c;
      }
      .success {
        color: #67c23a;
      }
    }
  }
  
  .list-box {
    .item {
      display: flex;
      justify-content: space-between;
      color: #999;
      padding: 2px 0;
  
      .isActive {
        color: #1890ff;
      }
      .finish-type {
        margin-left: 5px;
      }
      .unfinishColor {
        color: #999999;
      }
      .doingColor {
        color: #6a4aff;
      }
      .finishColor {
        color: #000000;
      }
    }
  }
  
  /deep/ .el-col-12 {
    width: 25%;
  }
  
  /deep/ .el-range-editor--small .el-range-separator {
    line-height: 24px;
    font-size: 13px;
    width: 25px;
  }
  /deep/ .header_name_style {
    font-size: 14px;
    font-family: PingFang-SC, PingFang-SC;
    font-weight: bold;
    color: #6c7481;
  }
  </style>
  